/*
* Copyright (c) 2025 Huawei Device Co., Ltd.
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including but not limited to the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to provide persons with access to the Software
* subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGE OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/

<template>
  <grid-row
    ref="gridRowRef"
    :scope="scopeId"
    :class="scopeId"
    :columns="componentAttr.columns"
    :gutterX="componentAttr.gutterX"
    :gutterY="componentAttr.gutterY"
    :gutter="gutter"
    :direction="componentAttr.direction"
    :breakpoints="breakpoints"
    :breakpointValue="breakpointValue"
    :breakpointRefrence="breakpointRefrence"
  >
    <slot></slot>
  </grid-row>
</template>

<script>
import { getBreakpointsAttr, getbreakpointManager } from '../../utils/getBreakpoint';
import { getScopeId } from '../../utils/getScopeId';

const defaultValue = {
  breakpoints: {
    breakpointValue: { xs: 0, sm: 320, md: 600, lg: 840 },
    breakpointRefrence: 'windowSize',
  }
};

export default {
  name: 'MultiGridRow',
  props: {
    columns: [Number, Object],
    gutter: [String, Number, Object],
    breakpoints: {
      type: Object,
      default: () => defaultValue.breakpoints,
    },
    direction: String,
    onGridItemClick: {
      type: Function,
      default: () => {},
    },
    onBreakpointChange: {
      type: Function,
      default: (bp) => {},
    },
  },
  data() {
    const breakpoints = this.$props.breakpoints || defaultValue.breakpoints;
    const gutter = this.$props.gutter || 0; 
    return {
      unsubscribe: null,
      breakpointManager: null,
      breakpointValue: JSON.stringify(breakpoints.breakpointValue),
      breakpointRefrence: breakpoints.breakpointRefrence || breakpoints.breakpointRefrence,
      gutterX: (typeof gutter === 'object' ? gutter.x : gutter) || 0,
      gutterY: (typeof gutter === 'object' ? gutter.y : gutter) || 0,
      scopeId: getScopeId(),
      attrNameArr: ['columns', 'gutterX', 'gutterY', 'direction'],
      componentAttr: {
        columns: 12,
        gutterX: 0,
        gutterY: 0,
        direction: '',
      }
    };
  },
  watch: {
    $props: {
      handler: function() {
        this.getCurrentAttr();
      },
      deep: true,
    }
  },
  methods: {
    getCurrentAttr() {
      this.attrNameArr.forEach(item => {
        if (this.$props[item] !== undefined) {
          this.componentAttr[item] = getBreakpointsAttr(this.$props[item], this.breakpointManager);
        } else {
          this.componentAttr['gutterX'] = getBreakpointsAttr(this.gutterX, this.breakpointManager);
          this.componentAttr['gutterY'] = getBreakpointsAttr(this.gutterY, this.breakpointManager);
        }
      });
    },
  },
  mounted() {
    if (this.onGridItemClick) {
      this.$refs.gridRowRef.registerEvents(this.onGridItemClick);
    }
    this.breakpointManager = getbreakpointManager(
      this.breakpointRefrence, 
      JSON.parse(this.breakpointValue), 
      this.scopeId
    );
    this.unsubscribe = this.breakpointManager.subscribeToBreakpoint((bp) => {
      this.getCurrentAttr();
      this.$props.onBreakpointChange(bp);
    });
    
    const mountedCustomEvent = new CustomEvent('gridRowVue2Mounted', {
      detail: {message: true},
      bubbles: false,
      composed: true,
    });
    this.$refs.gridRowRef?.dispatchEvent(mountedCustomEvent);
  },
  beforeDestroy() {
    if (this.unsubscribe) {
      this.unsubscribe();
    }
    if (this.breakpointManager) {
      this.breakpointManager.destroy();
    }
  }
};
</script>